<template>
	<view class="warp-zhenggfk">
		<u-form :model="form" ref="uForm">
			<u-form-item :border-bottom="borderBottom" prop="">
				<view class="group-row">
					<view class="group-title">
						延期时间选择：
					</view>
					<view class="group-title">
						<u-number-box v-model="dateValue" :size="34"></u-number-box>
					</view>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="borderBottom" prop="">
				<view class="group-row">
					<view class="group-title">
						延期时间单位：
					</view>
					<view class="group-title">
						<u-radio-group v-model="value"  :size='40'>
									<u-radio 
										@change="radioChange" 
										v-for="(item, index) in list" :key="index" 
										:name="item.name"
										:disabled="item.disabled"
									>
										{{item.name}}
									</u-radio>
						</u-radio-group>
					</view>
				</view>
				
			</u-form-item>
			<u-form-item :border-bottom="borderBottom">
				<view class="group-title" style="margin-bottom: 0;">
					延期理由：
				</view>
			</u-form-item>
			<u-form-item :border-bottom="borderBottom" prop="weizjshjms">
				<u-input class="weizjshjms-input" placeholder="备注:" v-model="form.weizjshjms" type="textarea" border="true" height="150" />
			</u-form-item>
			<u-button :custom-style="customStyle" @click="submit">上报</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				borderBottom: false,
				customStyle: {
					background: '#409eff',
					color: '#fff',
					marginTop: '20rpx'
				},
				list: [
					{
						name: '小时'
					},
					{
						name: '天'
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '小时',
				dateValue:1,
				form: {
					
				},
				rules: {
					
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}

	}
</script>

<style>
	.warp-zhenggfk {
		width: 100%;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.zhenggfk-upload {
		width: 100%;
		height: auto;
	}

	.group-title {
		font-size: 32rpx;
		color: rgb(3, 169, 244);
		margin-bottom: 20rpx;
		margin-right: 40rpx;
	}

	.map-box {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.weizjshjms-bar{
		display: flex;
		justify-content: space-between;
	}
	.weizjshjms-input{
		width: 70%;
	}
	.tdxz-btn button{
		margin-top: 0 !important;
	}
	.group-row{
		width: 700rpx;
		display: flex;
	}
</style>
